<template>
  <view class="container">

    <view class="container_address">
      <h1 class="container_title">{{curretnStore.deptName?curretnStore.deptName : '请先前往主页获取门店'}}</h1>
      <text class="container_text">据您10km以上，请确认是在此门店下单</text>
      <view class="container_address_phone">
        <h1>联系电话</h1>
        <button v-if="!phone" type="default" class="binding_button" open-type="getPhoneNumber"
          @getphonenumber="bindPhone">一键获取</button>

        <view>{{phone}}</view>
      </view>
    </view>

    <view class="container_settlement">
      <view class="container_settlement_h1">
        商品详情
      </view>

      <block v-for="(item,i) in checkedCountList" :key="i">
        <view class="container_settlement_box">
          <view class="container_settlement_left">
            <image :src="item.productImg" mode="aspectFill"></image>
            <view class="container_settlement_left_text">{{item.productName}}</view>
          </view>
          <view class="container_settlement_right">
            <h1>¥{{item.salePrice}}</h1>
            <text>×{{item.goods_count}}</text>
          </view>
        </view>
      </block>

      <!-- <van-cell title="优惠券" is-link :border="false" :value="couponItem" @click="couponItemClick" /> -->

      <!-- 描述 -->
      <view class="describe">
        <view class="describe_title">
          备注
        </view>
        <view class="container_input">
          <textarea class="container_input_box" v-model="remarks" maxlength="50"
            placeholder-style="color:rgba(61, 61, 61, 0.5)" placeholder="请添加备注" @input="textareaInput" />
          <text class="container_input_abso">{{textareaList}}/50</text>
        </view>
      </view>

      <view class="container_settlement_total">
        <view class="container_settlement_total_text">
          共{{checkedCount}}件商品，共计
        </view>
        <text>¥{{CouponsClickItem?moneyCount :checkedGoodsAmount}}</text>
      </view>
    </view>

    <view class="container_pay">
      <h1>支付方式</h1>
      <view class="container_pay_icon">
        <image src="/static/WeChat.png" mode="aspectFill"></image>
        <text>微信支付</text>
      </view>
    </view>

    <view class="container_pay_btn">
      <text class="container_pay_btn_text">总计</text>
      <h1>¥<text
          style="font-size: 36rpx;color: rgba(61, 61, 61, 1);font-weight: 500;">{{CouponsClickItem?moneyCount :checkedGoodsAmount}}</text>
      </h1>
      <view class="container_pay_btn1" @click="paymentClick">
        支付
      </view>
    </view>


    <!-- 优惠劵弹框 -->
    <van-popup :show="couponItemShow" round position="bottom" custom-style="height: 80%" @close="oncouponClose">
      <view class="couponList">
        <view class="couponList_title">
          优惠劵选择
        </view>
        <view class="couponList_box">
          <view style="font-size: 36rpx;font-weight: 500;margin-bottom: 20rpx;">可使用</view>
          <block v-for="(item1,i1) in CouponsListtrue" :key="i1">
            <view class="couponList_box_item" @click="couponClick(item1)">
              <view class="couponList_box_item_left">
                <view class="couponList_box_item_title">
                  <view v-if="item1.couponType == 0" class="couponList_box_item_title_box">
                    折扣券
                  </view>
                  <view v-if="item1.couponType == 1" class="couponList_box_item_title_box">
                    抵扣券
                  </view>
                  <h1>{{item1.couponName}}</h1>
                </view>
                <text>{{item1.time}}</text>
                <text>{{item1.product}}可使用</text>
              </view>
              <view class="couponList_box_item_right">
                <h1 v-if="item1.couponType == 1">¥<text style="color: rgba(61, 61, 61, 1);
font-size: 72rpx;font-weight: bold;">{{item1.cash}}</text></h1>
                <h1 v-if="item1.couponType == 0"><text style="color: rgba(61, 61, 61, 1);
font-size: 72rpx;font-weight: bold;">{{JSON.stringify(item1.discount).substr(2,1)}}</text>折</h1>
                <text class="couponList_box_item_right_text">{{item1.condition}}使用</text>
              </view>
            </view>
          </block>
        </view>
        <!-- 不可使用 -->
        <!-- <view class="couponList_box">
          <view style="font-size: 36rpx;font-weight: 500;margin-bottom: 20rpx;">不可使用</view>
          <block v-for="(item1,i1) in CouponsListfalse" :key="i1">
            <view class="couponList_box_item">
              <view class="couponList_box_item_left">
                <view class="couponList_box_item_title">
                  <view v-if="item1.couponType == 0" class="couponList_box_item_title_box">
                    折扣卷
                  </view>
                  <view v-if="item1.couponType == 1" class="couponList_box_item_title_box">
                    现金卷
                  </view>
                  <view v-if="item1.couponType == 2" class="couponList_box_item_title_box">
                    抵扣卷
                  </view>
                  <h1>{{item1.couponName}}</h1>
                </view>
                <text>{{item1.time}}</text>
                <text>{{item1.product}}可使用</text>
              </view>
              <view class="couponList_box_item_right">
                <h1>¥<text style="color: rgba(61, 61, 61, 1);
        font-size: 72rpx;font-weight: bold;">{{item1.cash}}</text></h1>
                <text class="couponList_box_item_right_text">{{item1.condition}}使用</text>
              </view>
            </view>
          </block>
        </view> -->
      </view>
    </van-popup>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations,
    mapGetters,
    mapActions
  } from 'vuex'
  import {
    bindWxPhone,
  } from "@/api/user.js";
  import {
    getorderCoupons,
    getordercreate
  } from "@/api/order.js"
  export default {
    data() {
      return {
        remarks: '',
        textareaList: 0,
        phone: '',
        couponItem: '',
        couponItemShow: false,
        items: [],
        // 优惠劵列表
        CouponsListtrue: [],
        CouponsListfalse: [],
        // 选中的优惠劵
        CouponsClickItem: '',
      };
    },
    computed: {
      ...mapGetters('m_user', ['curretnStore', 'isLogin', 'userInfo']),
      ...mapGetters('m_cart', ['checkedCountList', 'checkedGoodsAmount', 'checkedCount']),
      moneyCount() {
        if (this.CouponsClickItem.couponType == 0) {
          return (Number(this.checkedGoodsAmount) * Number(this.CouponsClickItem.discount)).toFixed(2)
        } else if (this.CouponsClickItem.couponType == 1) {
          return (Number(this.checkedGoodsAmount) - this.CouponsClickItem.cash).toFixed(2)
        } else {
          return
        }
      }
    },
    onLoad() {
      // console.log(this.items)
      // console.log(Number(this.checkedGoodsAmount))
      this.getorderCouponsItem()
      
      this.phone = this.userInfo.phone
    },
    methods: {
      ...mapActions('m_user', ['getCode', 'getUserInfo', 'getProvider']),
      textareaInput(e) {
        // console.log(e)
        this.textareaList = e.detail.cursor
        this.remarks = e.detail.value.trim()
      },
      // 获取优惠劵
      getorderCouponsItem() {
        this.checkedCountList.forEach(item => {
          this.items.push({
            count: item.goods_count,
            productId: item.id
          })
        })
        getorderCoupons(this.items).then(res => {
          this.couponItem = '暂无可用'
          // // this.CouponsListtrue = res.data
          // this.CouponsListtrue = res.data.filter(x => x.isUseable)
          // // this.CouponsListfalse = res.data.filter(x => !x.isUseable)
          // if (this.CouponsListtrue.length != 0) {
          //   this.couponItem = '有 ' + this.CouponsListtrue.length + ' 张可用'
          // } else {
          //   this.couponItem = '暂无可用'
          // }
          // console.log(this.CouponsListtrue)
          // console.log(this.CouponsListfalse)
        }).catch(err => {
          this.$util.Tips({
            title: err
          })
        })
      },
      // 绑定手机号
      bindPhone(e) {
        let that = this;
        this.getCode().then(code => {
          console.log(code)
          bindWxPhone(
            e.detail.encryptedData,
            e.detail.iv,
            code
          ).then(res => {
            console.log(res.data)
            that.phone = res.data
            if (res.success) {
              that.getUserInfo();
            }
          }, error => {
            // console.log(error);
          });
        }).catch(res => {
          // console.log(res);
        });
      },
      oncouponClose() {
        this.couponItemShow = false
      },
      couponItemClick() {
        this.couponItemShow = true
      },
      // 点击优惠劵
      couponClick(item) {
        this.CouponsClickItem = item
        this.couponItem = this.CouponsClickItem.couponName
        this.couponItemShow = false
      },
      // 支付
      paymentClick() {
        const that = this
        if (this.phone) {
          uni.showLoading({
            title: '加载中'
          });
          this.getCode().then(code => {
            const queryType = {
              items: this.items,
              memberCouponId: this.CouponsClickItem ? this.CouponsClickItem.id : -1,
              phone: this.phone,
              remark: this.remarks,
              storeId: this.curretnStore.id,
              code
            }
            getordercreate(queryType).then(res => {
              this.getProvider().then(provider => {
                // 调用微信支付
                let goPages = '/subpkg/pay/pay-status?id=' + res.data.orderId;
                uni.requestPayment({
                  provider: provider[0],
                  timeStamp: res.data.timeStamp,
                  nonceStr: res.data.nonceStr,
                  package: res.data.package,
                  signType: res.data.signType,
                  paySign: res.data.paySign,
                  success: function(res) {
                    uni.hideLoading();
					
					return that.$util.Tips({
						title: '支付成功',
						icon: 'success'
					}, {
						tab: 5,
						url: goPages
					});
                  },
                  fail: function(err) {
                    uni.hideLoading();
                    that.$util.Tips({
                      title: '取消支付！'
                    })
                  }
                });
              })
            }).catch(err => {
              this.$util.Tips({
                title: err
              })
            })
          }).catch(res => {
            this.$util.Tips({
              title: res
            })
          });
        } else {
          this.$util.Tips({
            title: '请先获取手机号！'
          })
        }
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: rgba(245, 245, 245, 1);
  }

  .container {
    padding: 30rpx 30rpx 132rpx;

    .container_address {
      // height: 232rpx;
      background-color: rgba(255, 255, 255, 1);
      border-radius: 20rpx;
      padding: 30rpx;
      box-sizing: border-box;

      .container_title {
        color: rgba(0, 0, 0, 0.7);
        font-size: 32rpx;
      }

      .container_text {
        color: rgba(0, 0, 0, 0.3);
        font-size: 24rpx;
      }

      .container_address_phone {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 35rpx;

        h1 {
          color: rgba(0, 0, 0, 0.7);
          font-size: 30rpx;
        }

        button {
          margin: 0 !important;

        }

        .binding_button {
          width: 150rpx;
          height: 50rpx;
          border-radius: 50rpx;
          line-height: 50rpx;
          background-color: #FDD338 !important;
          border: none;
          font-size: 22rpx;
          color: rgba(61, 61, 61, 1);
        }
      }
    }


    .container_settlement {
      // height: 844rpx;
      background-color: rgba(255, 255, 255, 1);
      border-radius: 20rpx;
      margin-top: 30rpx;
      padding: 40rpx 30rpx;
      box-sizing: border-box;

      /deep/ .van-cell {
        padding: 45rpx 0 !important;

        .van-cell__title {
          color: rgba(0, 0, 0, 0.7);
          font-size: 30rpx;
        }

        .van-cell__value {
          color: rgba(0, 0, 0, 0.3);
          font-size: 30rpx;
        }
      }

      .container_settlement_h1 {
        color: rgba(0, 0, 0, 0.7);
        font-size: 34rpx;
        font-weight: bold;
      }

      .container_settlement_box {
        height: 116rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 40rpx;

        .container_settlement_left {
          width: 80%;
          display: flex;

          image {
            width: 116rpx;
            height: 116rpx;
            border-radius: 10rpx;
          }

          .container_settlement_left_text {
            width: 80%;
            color: rgba(61, 61, 61, 1);
            font-size: 30rpx;
            margin-left: 30rpx;
            padding-top: 5rpx;
          }
        }

        .container_settlement_right {
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-end;
          padding: 5rpx 0;
          box-sizing: border-box;

          h1 {
            color: rgba(61, 61, 61, 1);
            font-size: 30rpx;
          }

          text {
            color: rgba(61, 61, 61, 0.5);
            font-size: 28rpx;
          }
        }
      }

      .describe {

        .describe_title {
          color: rgba(61, 61, 61, 1);
        }

        .container_input {
          position: relative;
          height: 268rpx;
          background-color: rgba(247, 247, 247, 1);
          border-radius: 10rpx;
          margin-top: 20rpx;
          padding: 29rpx 36rpx;
          box-sizing: border-box;
          font-size: 26rpx;


          .container_input_box {
            height: 260rpx !important;
          }

          .container_input_abso {
            position: absolute;
            bottom: 30rpx;
            right: 50rpx;
            color: rgba(61, 61, 61, 0.5);
          }

          .minImage {
            position: absolute;
            bottom: 30rpx;
            left: 50rpx;
            width: 40rpx;
            height: 36rpx;
          }

          .minImage1 {
            left: 150rpx;
          }
        }
      }

      .container_settlement_total {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        color: rgba(0, 0, 0, 0.7);
        font-size: 26rpx;
        margin-top: 44rpx;

        .container_settlement_total_text {
          margin-right: 18rpx;
        }

        text {
          color: rgba(61, 61, 61, 1);
          font-size: 36rpx;
          font-weight: bold;
        }
      }
    }


    .container_pay {
      padding: 44rpx 30rpx;
      background-color: rgba(255, 255, 255, 1);
      border-radius: 20rpx;
      margin-top: 30rpx;
      color: rgba(0, 0, 0, 0.7);
      font-size: 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      image {
        width: 34rpx;
        height: 34rpx;
        margin-right: 16rpx;
      }

      .container_pay_icon {
        display: flex;
        align-items: center;
      }
    }

    .container_pay_btn {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 102rpx;
      background-color: rgba(255, 255, 255, 1);
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .container_pay_btn1 {
        width: 278rpx;
        height: 102rpx;
        background-color: rgba(253, 211, 56, 1);
        text-align: center;
        font-size: 34rpx;
        line-height: 102rpx;
      }

      .container_pay_btn_text {
        color: rgba(61, 61, 61, 1);
        font-size: 28rpx;
      }

      h1 {
        color: rgba(61, 61, 61, 1);
        font-size: 28rpx;
        margin: 0 30rpx 0 16rpx;
      }
    }


    .couponList {
      padding: 0 24rpx;

      .couponList_title {
        font-size: 36rpx;
        text-align: center;
        margin-top: 36rpx;
      }

      .couponList_box {
        margin-top: 32rpx;

        .couponList_box_item {
          box-sizing: border-box;
          padding: 50rpx 46rpx;
          height: 238rpx;
          background-color: rgba(255, 255, 255, 1);
          border-radius: 20rpx;
          border: 4rpx solid #f1f1f1;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 25rpx;

          .couponList_box_item_left {
            width: 65%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: space-between;

            .couponList_box_item_title {
              width: 100%;
              display: flex;
              align-items: center;
              font-weight: 500;

              .couponList_box_item_title_box {
                width: 84rpx;
                height: 36rpx;
                background-color: rgba(253, 211, 56, 1);
                border-radius: 5rpx;
                margin-right: 15rpx;
                color: rgba(51, 51, 51, 1);
                font-size: 24rpx;
                text-align: center;
                line-height: 36rpx;
              }

              h1 {
                color: rgba(61, 61, 61, 1);
                font-size: 30rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }

            text {
              width: 100%;
              color: rgba(61, 61, 61, 0.6);
              font-size: 24rpx;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }

          .couponList_box_item_right {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;

            .couponList_box_item_right_text {
              color: rgba(61, 61, 61, 0.5);
              font-size: 24rpx;
            }
          }
        }
      }
    }
  }
</style>
